<template>
  <el-row  class="user" style="height: 100%">
     <el-col :span="4" class="leftCol" style="height:100%;overflow:auto">
       <div class="leftInput" >
         <el-input placeholder="输入关键字进行过滤" v-model.trim="filterText" size="small" />
       </div>
       <div class="space"></div>
       <el-row style="padding: 10px" >
         <el-col :span="20">
           <h3>部门结构树</h3>
         </el-col>
         <el-col :span="4">
           <el-button icon="el-icon-refresh" size="mini" @click="refreshTree"/>
         </el-col>
       </el-row>
       <div class="leftTree">
         <el-tree
           class="filter-tree"
           :data="treeData"
           :node-key="nodeKey"
           :props="defaultProps"
           :filter-node-method="filterNode"
           @node-click="handleNodeClick"
           ref="tree">
           <span slot-scope="{ node, data }">
                  <el-tooltip  class="item" effect="dark" :content="node.label" placement="right" popper-class="point" >
                    <span > {{ node.label | ellipsis(8) }} </span>
                  </el-tooltip>
            </span>
         </el-tree>
       </div>
     </el-col>
     <el-col :span="20" style="padding: 20px ;height:100%;overflow:auto">
         <div style="height: 80%">
           <!--1.搜索框-->
           <el-form ref="queryForm" label-width="86px" label-position="left" :model="queryData" :inline="true" style="white-space: nowrap;">
             <div>
               <el-form-item label="部门名称" prop="departmentName">
                 <el-input v-model.trim="queryData.departmentName" placeholder="请输入字典项" show-word-limit />
               </el-form-item>
               <el-form-item label="员工姓名" prop="name">
                 <el-input v-model.trim="queryData.name" placeholder="请输入字典项" show-word-limit />
               </el-form-item>
               <el-form-item label="员工工号" prop="empId">
                 <el-input v-model.trim="queryData.empId" placeholder="请输入字典项" show-word-limit />
               </el-form-item>
               <el-form-item>
                 <el-button type="primary" @click="dataList">查询</el-button>
                 <el-button @click="resetFields('queryForm')">重置</el-button>
               </el-form-item>
             </div>
           </el-form>
             <div style="padding: 5px">
               <el-button type="primary" @click="toSave('新增')" size="mini">新增</el-button>
             </div>
           <!--2.列表-->
           <el-table  v-loading="loading" element-loading-text="数据加载中" :data="tableData" :header-cell-style="{background:'#f0f0f0'}" :row-style="{height: '0'}" :cell-style="{padding: '6px'}" style="overflow-y:auto;max-height:88%" @current-change="selectDepart" >
             <el-table-column  type="index" label="序号" width="50">
             </el-table-column>
             <el-table-column label="工号" width="100">
               <template slot-scope="scope">{{scope.row.empId}}</template>
             </el-table-column>
             <el-table-column label="姓名" width="150">
               <template slot-scope="scope">{{scope.row.name}}</template>
             </el-table-column>
             <el-table-column label="部门" width="300">
               <template slot-scope="scope">{{scope.row.departmentName}}</template>
             </el-table-column>
             <el-table-column  label="性别" width="100">
               <template slot-scope="scope">{{scope.row.gender}}</template>
             </el-table-column>
             <el-table-column  label="手机号" width="300">
               <template slot-scope="scope">{{scope.row.mobile}}</template>
             </el-table-column>
             <el-table-column  label="状态" width="100">
               <template slot-scope="scope">{{scope.row.enableState==0? '启用':'禁用'}}</template>
             </el-table-column>
             <el-table-column label="操作" >
               <template slot-scope="scope">
                 <el-button v-if="scope.row.enableState==0" type="text" @click.stop="changeState(scope.row.empId,1)">禁用</el-button>
                 <el-button v-else type="text" @click.stop="changeState(scope.row.empId,0)">启用</el-button>
               </template>
             </el-table-column>
           </el-table>
           <!--3.分页-->
           <div style=" background-color: #ffffff;padding: 20px 10px;">
             <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="queryData.pageNumber"
               :page-sizes="[10, 50, 100, 200]"
               :page-size="queryData.pageSize"
               layout=" total,sizes,->,jumper, prev, pager, next"
               :total="totalSize">
             </el-pagination>
           </div>
       </div>

       <!--4.编辑窗口-->
       <el-dialog :title="title" :visible.sync="saveDialog"  width="30%"  append-to-body :close-on-click-modal="false" @close="clearForm('departEditForm')">

         <el-form ref="departEditForm" label-width="86px" label-position="left" :model="saveData" :rules="saveRules">
           <el-form-item  label="部门" prop="departmentId" >
             <span v-if="title=='编辑'">{{saveData.departmentName}}<el-input  v-model.trim="saveData.departmentId" v-show="false"/></span>
             <el-cascader v-else :options="treeData" :props="cascadeProps"  :show-all-levels="false"v-model="saveData.departmentId" clearable  ref="cascader" @change="cascaderChange"  style="width: 100%"></el-cascader>
           </el-form-item>
           <el-form-item label="员工号" prop="empId">
             <span v-if="title=='编辑'">{{saveData.empId}}</span>
             <el-input v-show="title=='新增'" v-model.trim="saveData.empId" placeholder="请输入员工号" type="tel" show-word-limit />
           </el-form-item>
           <el-form-item label="姓名" prop="name">
             <el-input v-model.trim="saveData.name" placeholder="请输入姓名" show-word-limit />
           </el-form-item>
           <el-form-item label="性别" prop="gender">
             <el-select v-model="saveData.gender" placeholder="请选择性别">
               <el-option v-for="item in $config.gender" :key="item" :label="item" :value="item"/>
             </el-select>
           </el-form-item>
           <el-form-item label="手机号" prop="mobile">
             <el-input v-model.trim="saveData.mobile" placeholder="请输入手机号" type="tel" show-word-limit />
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialog = false">取 消</el-button>
        <el-button type="primary" @click="editData">确 定</el-button>
      </span>
       </el-dialog>
     </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      //列表搜索字段
      queryData:{
        departmentId:'18FBBB22E6304A8BAA07A1BC60FD7358',
        name:'',
        empId:'',
        departmentName:'',
        //当前页
        pageNumber: 1,
        //每一页条数
        pageSize: 10,
      },
      parentId: '18FBBB22E6304A8BAA07A1BC60FD7358',
      //列表数据
      tableData: [],
      //是否展示编辑框
      saveDialog: false,
      // 编辑框数据
      saveData: {
        departmentId:'',
        empId: '',
        gender: '',
        mobile: '',
        name: '',
        departmentName:''
      },
      saveRules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        empId: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
      },
      // 部门状态
      typeList: [
        {value: '正常', label: '正常'},
        {value: '已撤销', label: '已撤销'}
      ],
      //列表选中的部门
      //编辑框标题
      title:'新增',
      selectDepartment:'',
      //列表选中的部门id
      selectDepartmentId:'',
      //tree主键
      nodeKey:'departmentId',
      //总条数
      totalSize: 0,
      //是否在加载数据
      loading: false,
      // 是否开启调试输出
      debug: true,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      cascadeProps:{
        value: "departmentId",
        label: "name",
        children: "children",
        emitPath:false,
        checkStrictly: true,
        disabled: 'noBasic',
      },
      departmentTypes:[]
    };
  },
  methods: {
    //打开编辑弹窗
    toSave(type,data){
      this.saveDialog=true;
      if(type==='编辑'){
        this.title='编辑'
        this.saveData=JSON.parse(JSON.stringify(data));
      }else {
        this.saveData.parentDepartmentId=this.parentId
      }

    },
    //点击部门结构树节点
    handleNodeClick(data){
      this. resetList(data.departmentId)
    },
    resetList(departmentId){
      this.resetFields('queryForm');
      this.queryData.departmentId= departmentId
      this.dataList()
    },
    //树
    departmentTree(){
      this.$api.department.tree({departmentId:this.parentId}).then(resp => {
        this.treeData=resp;
      })
      this. resetList(this.parentId)
    },
    //列表
    dataList(){
      this.loading = true;
      this.$api.user.selectUserByDepartmentId( this.queryData).then(resp => {
        this.tableData = resp.data;
        this.totalSize=  resp.totalSize;
      })
      // 完成赋值后，把加载状态赋值为false
      this.loading = false;
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    refreshTree(){

    },
    //重置查询条件
    resetFields(formName){
      this.$refs[formName].resetFields();
    },
    //分页
    handleSizeChange(val) {
      this.queryData.pageSize=val;
      this.dataList();
    },
    handleCurrentChange(val) {
      this.queryData.pageNumber=val;
      this.dataList();
    },
    editData(){
      this.$refs.departEditForm.validate(async (valid) => {
        if (valid) {
          this.$api.user.save(this.saveData).then(resp => {
            this. dataList()
            this.departmentTree()
            this.saveDialog = false
          })
        } else {
          return false
        }
      })
    },
    cascaderChange(val){
      let node = this.$refs.cascader.getCheckedNodes()[0];
      let level=node.data.level
      let isTemp=node.data.type.substr(0, 2)=='临时'
      this.departmentTypes=this.$common.departmentType(level,isTemp)
      this.saveData.type=''
    },
    clearForm(form) {
      this.departmentTypes=this.$common.departmentType(1,false)
      this.title='新增'
      this.saveData= {
          departmentId: '',
          parentDepartmentId: '', // 状态
          name: '' ,// 描述
          type:'',
          status:'',
          contacts:'',
      }
      this.$nextTick(() => {
        this.$refs.departEditForm.clearValidate()
      })
    },
    selectDepart(department) {
      this.selectDepartment=department
      this.selectDepartmentId = department.departmentId
    },
    changeState(empId,state){
      this.$api.user.changeState({enableState:state,empId:empId}).then(resp => {
         this. dataList()
      })
    },
    deleteUser(empId){
      this.$api.user.delete({empId:empId}).then(resp => {
        this. dataList()
      })
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {

  },
  created() {},
  mounted() { // 渲染后执行
    //树
    this.departmentTree()
    this.departmentTypes=this.$common.departmentType(1,false)

  },


}
</script>

<style scoped>
.user{
}
.leftCol{
  border-right: 5px solid #f0f0f0;
  height: 100%;
}
.leftInput{
  padding: 20px;

}
.leftTree{
  padding-top: 10px;
  padding-right: 10px;
  overflow-y:auto;
}
.space{
  height: 5px;
  background-color:#f0f0f0 ;
}
.tooltip-text {
  color: black;
  border: 1px solid #fff;
  background: #fff;
  padding: 0px;
  margin: 0px;
  display: inline-block;
}
.el-table::before {
  z-index: inherit;
}
</style>
<style>
  .point.el-tooltip__popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color:  #fff;
  }
  .point .el-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color:  #fff;
  }
  .point{
    background:  #fff !important;
    color: black!important;
    border: 1px solid black !important;
  }
</style>
